<template>
	<div class="portStatusBox">
            <template v-for="(item) in tableColumns">
                <el-tooltip 
                    effect="light" 
                    placement="bottom"
                    :key="item.ROWNUM">
                    <div slot="content" style="text-align: center">
                        <span style="color: #409EFF; line-height: 16px">{{ item.IFNAME }}</span>
                        <br/>
                    </div>
                    <el-button 
                        class="statusIconButton" 
						:type="chooseColor(item.IFSTAT)"
                        size="mini"
						circle>
                        <!-- <i class="el-icon-apple"></i> -->
                    </el-button>
                </el-tooltip>
            </template>
	</div>
</template>

<script>
import { fetchData } from '@/api/index.js';
import bus from 'common/bus.js';

export default {
	data() {
		return {
			postData: {
                opera: 'OSNetworkIfSpeed',
                curPage: 1,
                pageSize: 1000,
                sort: {
                    sortColumn: 'rtx_kbyte',
                    sortOrders: 'desc'
                },
                filtersType: 'fuzzyquery',
                filters: {
                    "monid": "",
					'IFNAME': 'Ethernet'
                },
			},
            tableColumns: [],
			timerName: 'portStatus',
			timerEventName: 'timerPortStatus',
			timerInterval: 1000 * 60,
		};
	},
	created() {
        bus.$on('selectedNetMonID', msg => {
            // 获取数据
            this.selectedMonID = msg;
            this.postData.filters.monid = this.selectedMonID.selectedNETMonID;
            this.getData();
		});
		
		bus.$emit('timerNewTodo', {
			name: this.timerName,
			eventName: this.timerEventName,
			interval: this.timerInterval,
			intervalNow: 0,
		});

		bus.$on(this.timerEventName, (msg) => {
			if (msg.isGetData) {
                this.getData();
			}
		});
	},
	mounted() {

	},
	computed: {

	},
	methods: {
		getData() {
			fetchData({
				postData: JSON.stringify(this.postData),
			}).then((res) => {
				this.tableColumns = res.data;
			});
		},
		chooseColor(IFSTAT) {

			let _class = " ";

			switch (IFSTAT) {
				case 'up':
					_class = "success";
					break;
				// case 'down':
				// 	_class = "info";
				// 	break;
					
				default:
					_class = "info";
					break;
			}

			return _class;
		},
	},
	beforeDestroy() {
		bus.$emit('timerNewTodo', {
			name: this.timerName,
		});
	},
	watch: {},
};
</script>

<style scoped>
.portStatusBox {
	height: calc(100% - 22px - 8px);
	margin-bottom: 0 !important;
	text-align: left;
}
.statusIconButton{
	margin-left: 10px !important;
	margin-right: 10px !important;
}
.textLable .statusIconButton{
    background-color: rgba(2, 18, 56);
    border-color: rgba(0, 0, 0, 0);
    margin: 0 1px 5px;
}
.textLable .statusIconButton:hover {
    border-color: rgba(64, 158, 255, 0.6);
}
.textLable .statusIconButton.selected {
    background-color: rgba(64, 158, 255, 0.6);
}
.iconColor1 {
    color: #67C23A;
}
.iconColor2 {
    color: #F56C6C;
}
</style>
